<!doctype html>
<html>
<head>
	<title>Property Sheet: Basic Initialization</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="../../../codebase/webix.css">

<body>
	<script>

    var colors = [
        {id:1, value:"red"},
        {id:2, value:"blue"},
        {id:3, value:"green"},
        {id:4, value:"orange"},
        {id:5, value:"grey"},
        {id:6, value:"yellow"}
    ];

	var propertysheet_1 = {
		view:"property",  id:"sets", width:500,
		elements:[
			{ label:"Editors",       type:"label"},
			{ label:"Password",      type:"password"     , id:"a1",   value: "pass"},
            { label:"Text",          type:"text"         , id:"a2",   value: "pass"},
            { label:"Select",        type:"select"       , id:"a3",   value: "pass", options:colors },
			{ label:"Rich Select",   type:"text"   , id:"a4",   value: "1", suggest:colors },
			{ label:"Multi Select",  type:"multiselect"  , id:"a5",   value: "1,3" , options:colors },
			{ label:"Date Picker",   type:"date"   , id:"a6",   value: "1980-01-02"},
            { label:"Color Picker",  type:"color"  , id:"a7",   value: "#ff88a8"}
		]
	};

	webix.ui({
		cols:[
            { template:"left" },
			{rows:[
				propertysheet_1
			]}
		]
	});

	</script>


</body>
</html>
